<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="chart-container"></div>
		<script src="https://fastly.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>
	</body>
	<script type="text/javascript">
		var dom = document.getElementById("chart-container");
		var myChart = echarts.init(dom);
		var app = {};
		var option;
		option = {
			grid: {
				top: '18%',
				right: '2%',
				bottom: '18%',
				left: '10%'
			},
			xAxis: {
				type: 'category',
				//boundaryGap: false,//去除图表四周留白
				axisTick: { //x轴刻度
					show: false
				},
				axisLine: { //x轴线条颜色
					show: true,
					lineStyle: {
						color: '#374186',
						width: 0.5
					}
				},
				axisLabel: {
					show: true,
					rotate: 40, //文字倾斜度
					textStyle: {
						color: '#b1bcff', //更改坐标轴文字颜色
						fontSize: 14 //更改坐标轴文字大小
					}
				},
				data: ['大乐透', '竞彩', '七星彩', '排3', '排5', '即开', '顶呱呱', '传足']
			},
			yAxis: {
				type: 'value',
				//interval: 100, //刻度值间隔值
				name: '万',
				nameTextStyle: {
					padding: [0, 30, 5, 0], // y轴name位置
					color: '#b1bcff', //更改单位文字颜色
					fontSize: 15 //更改单位文字大小
				},
				splitLine: { //网格线
					lineStyle: {
						//type: 'dashed', //设置网格线类型 dotted：虚线   solid:实线
						color: '#374186', //网格线颜色
						width: 0.5
					},
				},
				axisLabel: {
					show: true,
					textStyle: {
						color: '#b1bcff', //更改坐标轴文字颜色
						fontSize: 15 //更改坐标轴文字大小
					}
				},
				axisLine: {
					//y轴线条颜色
					show: false,
				},
			},
			animationDuration: 3000,
			series: [{
				barWidth: 20, //柱形宽度
				showBackground: false, //柱形背景色
				itemStyle: { //柱形渐变色
					normal: {
						//barBorderRadius: 6, //柱形圆角
						color: new echarts.graphic.LinearGradient(
							0, 0, 0, 1,
							[{
									offset: 0,
									color: '#188df0'
								},
								{
									offset: 1,
									color: '#36d1dc'
								}
							]
						),
					},
				},
				label: { //显示当前柱形数值
					show: true,
					position: 'top',
					textStyle: {
						color: '#15d0dd', //更改坐标轴文字颜色
						fontSize: 15 //更改坐标轴文字大小
					}
				},
				data: [49, 71, 106, 129, 144, 176, 135, 148],
				type: 'bar'
			}]
		};

		var mychart1 = echarts.init(document.getElementById("chart-container"));
		//模拟实时数据
		var data = [
			[23, 42, 53, 23, 42, 47, 112, 212],
			[29, 64, 56, 98, 75, 67, 172, 312],
			[43, 82, 80, 116, 95, 367, 192, 412],
			[61, 105, 165, 156, 155, 500, 220, 512],
			[123, 234, 533, 206, 405, 667, 362, 612],
		];
		//定时器
		setInterval(getItem, 2000);

		function getItem() {
			var random = data[parseInt(Math.random() * data.length)];
			option.series[0].data = random; //获取series的第一行数据，并将模拟的数据赋值给他
			mychart1.setOption(option); //重新加载图表
		};
		if (option && typeof option === 'object') {
			myChart.setOption(option);
		};
	</script>
</html>
